<template>
    <div class="vocalist">
        <div class="top-nav">
            <ul class="nav-ul">
                <li :class="{'active' : activeNum === index }" v-for="(item,index) in cassification" :key="item.id" @touchstart="getType(index,item.id,item.name)">{{item.name}}</li>
            </ul>
        </div>
        <div class="country">
            <div class="country-main">
                <ul class="country-ul">
                    <li class="conuntry-li" v-for="item in country" :key="item.id">
                        
                        <div class="conuntry-img" @touchstart="getArea(item.id,item.name)">
                            <img v-lazy="require(`@/img/${item.img}.png`)">
                        </div>
                        <span>{{item.name}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import cassification from "@/data/singerCassification.json"
import country from "@/data/singerCountry.json"
export default {
    data(){
        return {
            cassification,
            activeNum : 0,
            country,
            type : -1,
            area : -1,
            countryName : "",
            singType : "全部"
        }
    },
    methods : {
        getType(index,id,name){
             this.activeNum = index;
             this.type = id;
             this.singType = name
        },
        getArea(id,name) {
            this.area = id;
            this.countryName = name
            this.$router.push({path: '/Singer', query: {"type": this.type,"area" : this.area,"country" :this.countryName,"singType" : this.singType}});
        }
    },
}
</script>

<style lang="scss" scoped>
    .vocalist {
        width: 100%;
    }

    .top-nav {
        width: 100%;

        .nav-ul {
            width: 85%;
            margin: auto;
            display: flex;
            
        >li {
            flex: 1;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            font-size: 0.8rem;
        }

        .active {
            color: #33ccbb;
            text-decoration: underline;
        }

        }
    }

    .country {
        width: 100%;
        padding-bottom: 8rem;
    }

    .country-main {
        width: 90%;
        margin: auto;
    }

    .country-ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .conuntry-li {
        width: 50%;
        margin: 0.5rem 0rem;
        position: relative;
        text-align: center;

        .conuntry-img {
            display: block;
            width: 8rem;
            height: 8rem;
            border-radius: 0.5rem;
            background:#33ccbb;;
            margin: auto;

            >img {
                width: 100%;
            }
        }

        >span {
            position:absolute;
            top: 85%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 1.2rem;
            color: rgb(255, 255, 255);
            font-weight: bolder;
            -webkit-text-stroke-color: rgb(0, 0, 0); 
            -webkit-text-stroke-width: 0.05em; 
        }
    }
</style>